import "./NavigateHeader.css"
import {Flex, Layout, Avatar, Dropdown, Tag} from "antd";

import {
    HistoryOutlined,
    HourglassOutlined,
    TeamOutlined,
    LogoutOutlined,
    SettingOutlined,
    LoginOutlined
} from '@ant-design/icons';
import {Link} from "react-router-dom";
import SqlStatusComponent from "@/component/navigate/SqlStatusComponent.tsx";
import {getString} from "@/util/local-storage.ts";
import {LOGIN_EXPIRE_TIME_KEY, LOGIN_IDENTITY_KEY, LOGIN_TIME_KEY, LOGIN_USERNAME_KEY} from "@/global/constant.ts";
import TextShow from "@/common/text/TextShow.tsx";
import {loginIsExpired} from "@/component/navigate/navigate.tsx";

const {Header} = Layout;
const NavigateHeader = () => {
    return (
        <Header className={"jasmine-header"}>
            <div className="jasmine-logo">
                <img className={"logo-icon"}
                     src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg"
                     alt="ProComponents" height="40"/>
                <span className={"logo-title"}>{import.meta.env.VITE_APPLICATION_NAME}</span>
            </div>
            <Flex className={"jasmine-header-center"}>
                <SqlStatusComponent/>
            </Flex>
            <Flex
                gap={0}
                className={"jasmine-header-end"}
                style={{overflow: "hidden"}}
            >
                {loginIsExpired()}
                <Tag color={"#0c7c7c"}>{getString(LOGIN_USERNAME_KEY)}</Tag>
                <Tag color={"#0c7c7c"}>{getString(LOGIN_IDENTITY_KEY)}</Tag>

                <Dropdown menu={{
                    items: [
                        {
                            key: "login_username",
                            label: <TextShow key_={"用户名"} value={getString(LOGIN_USERNAME_KEY)}/>,
                            icon: <HistoryOutlined/>
                        },
                        {
                            key: "user-authority",
                            label: <TextShow key_={"用户身份"} value={getString(LOGIN_IDENTITY_KEY)}/>,
                            icon: <TeamOutlined/>
                        },
                        {
                            key: "login_time",
                            label: <TextShow key_={"登录时间"} value={getString(LOGIN_TIME_KEY)}/>,
                            icon: <HistoryOutlined/>
                        },
                        {
                            key: "expire_time",
                            label: <TextShow key_={"过期时间"} value={getString(LOGIN_EXPIRE_TIME_KEY)}/>,
                            icon: <HourglassOutlined/>
                        },
                        {
                            type: 'divider',
                        },
                        {
                          key: "setting",
                            label: "设置",
                            icon: <SettingOutlined />
                        },
                        {
                            type: 'divider',
                        },
                        {
                            key: "log_in_navigate",
                            label: <Link to={"/login"}>重新登录</Link>,
                            icon: <LoginOutlined />
                        },
                        {
                            type: 'divider',
                        },
                        {
                            key: "log_out_navigate",
                            label: <Link style={{
                                color: "#df1935"
                            }} to={"/logout"}>退出登录</Link>,
                            icon: <LogoutOutlined/>
                        }
                    ]
                }}>
                    <Avatar style={{marginLeft: "5px"}}
                            src={<img src={"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"}
                                      alt="avatar"/>}/>
                </Dropdown>
            </Flex>
        </Header>
    );
};

export default NavigateHeader;